<template>
  <view class="user-center page-content">
    <up-navbar title="" :autoBack="false" :fixed="true" :border="false" bgColor="transparent" placeholder>
      <template #left>
        <view></view>
      </template>
    </up-navbar>

    <!-- 未登录状态 - 显示登录按钮 -->
    <view v-if="!userStore.isLogined" class="login-section" @click="handleWechatLogin">
      <view class="login-prompt">
        <view class="user-info">
          <up-avatar shape="circle" text="未登录" size="68" fontSize="18" bgColor="#f0f0f0" color="#999"></up-avatar>
          <view class="login-text">
            <view class="welcome-text">欢迎使用顺德智泊</view>
            <view class="login-hint">请先登录以享受完整服务</view>
          </view>
        </view>
        <button class="wechat-login-btn">
          去登录
        </button>
      </view>
    </view>

    <!-- 已登录状态 - 显示用户信息 -->
    <view v-else class="user-info-section">
      <view class="user-info-layout">
        <view class="user-left" @click="handleMenuClick({ path: '/pages-my/setting', action: '' })">
          <up-avatar shape="circle" :src="userInfo.headImageUrl" size="68" fontSize="18"></up-avatar>
          <view class="user-details">
            <view class="user-name">{{
              userInfo.nickName || userInfo.name || "用户" + userInfo.phone.substring(0, 4) + "****" +
              userInfo.phone.substring(8)
            }}</view>
            <view class="user-phone">{{ userInfo.phone || '未绑定手机号' }}</view>
          </view>
        </view>
        <view class="user-right">
          <view class="icon-item" @click="handleMessageClick">
            <image src="/static/images/message.png" mode="aspectFit" class="icon-image"></image>
            <view v-if="unreadCount > 0" class="badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</view>
          </view>
          <view class="icon-item" @click="handleLogoutClick">
            <image src="/static/images/logout.png" mode="aspectFit" class="icon-image"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 菜单选项区域 - 只在已登录时显示 -->
    <div class="menu-section">
      <!-- 顶部四个入口 -->
      <div class="top-entries">
        <div v-for="(item, index) in topEntries" :key="index" class="top-entry-item" @click="handleMenuClick(item)">
          <image :src="item.icon" mode="aspectFit" class="top-entry-icon" />
          <text class="top-entry-name">{{ item.name }}</text>
        </div>
      </div>

      <!-- 功能业务标题 -->
      <div class="business-title">功能业务</div>

      <!-- 功能业务入口 -->
      <div class="business-entries">
        <div v-for="(item, index) in businessEntries" :key="index"
          :class="['business-entry-item', index === businessEntries.length - 1 ? 'business-entry-item-last' : '']"
          @click="handleMenuClick(item)">
          <view class="business-entry-content" :style="{ background: item.bgColor }">
            <image :src="item.icon" mode="aspectFit" class="business-entry-icon" />
            <text class="business-entry-name">{{ item.name }}</text>
            <text v-if="item.description" class="business-entry-desc">{{ item.description }}</text>
            <view v-if="item.name === '系统通知' && unreadNotificationCount > 0" class="notification-badge">
              {{ unreadNotificationCount }}
            </view>
          </view>
        </div>
      </div>
    </div>

    <!-- 操作确认弹窗 -->
    <up-modal contentTextAlign="center" width="550rpx" :show="showModal" :title="modalTitle" :content="modalContent"
      show-cancel-button @confirm="handleModalConfirm" @cancel="showModal = false"></up-modal>

    <!-- 更多功能弹窗 -->
    <up-popup :show="showMorePopover" @close="showMorePopover = false" mode="left" background-color="#ffffff"
      :mask="true" :mask-click-close="true">
      <view class="more-popover-content">
        <view class="more-popover-title">更多功能</view>
        <scroll-view scroll-y class="collapse-scroll-container">
          <view class="collapse-container">
            <up-collapse :border="false" accordion>
              <!-- 使用多维数组循环渲染分组 -->
              <up-collapse-item v-for="(group, groupIndex) in menuGroups" :key="groupIndex">
                <template #title>
                  <text class="item__title__slot-title">{{ group.title }}</text>
                </template>
                <view class="collapse-content">
                  <view v-for="(item, index) in group.items" :key="index" class="collapse-menu-item"
                    @click="handleMoreItemClick(item)">
                    <image :src="item.icon" mode="aspectFit" class="collapse-menu-icon" />
                    <text class="collapse-menu-name">{{ item.name }}</text>
                  </view>
                </view>
              </up-collapse-item>
            </up-collapse>
          </view>
        </scroll-view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

import { useUserStore } from "@/store/user";
import { useAuth } from "@/hooks/index";
import { getUnreadNotificationCount } from "@/api";

const userStore = useUserStore();
const { wechatLogin } = useAuth();
// 获取用户信息
const userInfo = computed(() => userStore.userInfo || {});

// 未读通知数量
const unreadNotificationCount = ref(0);

// 获取未读通知数量
const fetchUnreadNotificationCount = async () => {
  if (!userStore.isLogined) {
    unreadNotificationCount.value = 0;
    return;
  }

  try {
    const result = await getUnreadNotificationCount();
    // 如果API未实现，使用模拟数据
    if (result.data !== undefined) {
      unreadNotificationCount.value = result.data || 0;
    } else {
      // 模拟数据：3条未读消息
      unreadNotificationCount.value = 3;
    }
  } catch (error) {
    console.error('获取未读通知数量失败', error);
    // 模拟数据：3条未读消息
    unreadNotificationCount.value = 3;
  }
};


// 微信登录处理函数
const handleWechatLogin = async () => {
  // 检查登录状态
  if (!userStore.isLogined) {
    // 未登录，跳转到登录页面
    uni.navigateTo({
      url: "/pages/login/index"
    });
    return;
  }
};


// 顶部四个入口
const topEntries = [
  {
    name: "工单管理",
    icon: "/static/home/1.png",
    path: "/pages/work-order/index",
  },
  {
    name: "数据明细",
    icon: "/static/home/2.png",
    path: "/pages/data-detail/index",
  },
  {
    name: "工作台",
    icon: "/static/home/3.png",
    path: "/pages/dashboard/index",
  },
  {
    name: "收入汇总",
    icon: "/static/home/4.png",
    path: "/pages/income-summary/index",
  },
];

// 功能业务入口（每行四个）
const businessEntries = [
  {
    name: "订单申诉",
    icon: "/static/home/5.png",
    description: "订单问题申诉",
    path: "/pages/order-appeal/index",
    bgColor: "#FFFAF6"
  },
  {
    name: "咨询留言",
    icon: "/static/home/6.png",
    description: "留言咨询回复",
    path: "/pages/service-ticket/index",
    bgColor: "#F6F8FF"
  },
  {
    name: "车辆认证",
    icon: "/static/home/7.png",
    description: "车辆审核认证",
    path: "/pages/vehicle-verify/list/index",
    bgColor: "#F9F6FF"
  },
  {
    name: "实名认证",
    icon: "/static/home/8.png",
    description: "实名认证审核",
    path: "/pages/realname-verify/list/index",
    bgColor: "#FFF1F1"
  },
  {
    name: "计费审核",
    icon: "/static/home/9.png",
    description: "计费规则审核",
    path: "/pages/charging-rule-wait/index",
    bgColor: "#F6F8FF"
  },
  {
    name: "异常订单",
    icon: "/static/home/10.png",
    description: "异常订单处理",
    path: "/pages/order-abnormal/index",
    bgColor: "#FFF1F1"
  },
  {
    name: "异常泊位",
    icon: "/static/home/11.png",
    description: "异常泊位操作",
    path: "/pages/abnormal-parking/index",
    bgColor: "#F6F8FF"
  },
  {
    name: "停车订单",
    icon: "/static/home/12.png",
    description: "停车订单查看",
    path: "/pages/park-order/list/index",
    bgColor: "#F9F6FF"
  },
  {
    name: "优惠券查询",
    icon: "/static/home/13.png",
    description: "优惠券查询",
    path: "/pages/coupon/index",
    bgColor: "#FFF1F1"
  },
  {
    name: "人员查询",
    icon: "/static/home/14.png",
    description: "查看人员信息",
    path: "/pages/inspector-info/index",
    bgColor: "#F6F8FF"
  },
  {
    name: "基础管理",
    icon: "/static/home/15.png",
    description: "基础设置管理",
    path: "/pages/base-manage/index",
    bgColor: "#FFFAF6"
  },
  {
    name: "系统用户",
    icon: "/static/home/16.png",
    description: "用户查询编辑",
    path: "/pages/system-user/index",
    bgColor: "#F6F8FF"
  },
  {
    name: "财务中心",
    icon: "/static/home/17.png",
    description: "财务数据报表",
    path: "/pages/finance-center/index",
    bgColor: "#F9F6FF"
  },
  {
    name: "车位监控",
    icon: "/static/home/18.png",
    description: "车位监控数据",
    path: "/pages/parking-monitor/index",
    bgColor: "#FFFAF6"
  },
  {
    name: "巡检功能",
    icon: "/static/home/19.png",
    description: "泊位监控统计",
    path: "/pages/inspection/index",
    bgColor: "#F6F8FF"
  },
  {
    name: "更多",
    icon: "/static/home/20.png",
    description: "",
    path: "/pages/system-notification/index",
    bgColor: "#EEF3FF"
  },
];

// 基础菜单项数据（保留原有数据结构用于兼容）
const baseMenuItems = [
  {
    name: "订单申诉✔",
    icon: "/static/images/bill@2x.png",
    action: "deviceInfo",
    path: "/pages/order-appeal/index",
  },
  {
    name: "咨询留言✔",
    icon: "/static/images/invoice@2x.png",
    action: "accountManage",
    path: "/pages/service-ticket/index",
  },
  {
    name: "车辆认证✔",
    icon: "/static/images/message@2x.png",
    path: "/pages/vehicle-verify/list/index",
  },
  {
    name: "实名认证✔",
    icon: "/static/images/message@2x(1).png",
    path: "/pages/realname-verify/list/index",
  },
  {
    name: "计费审核✔",
    icon: "/static/images/reserve@2x.png",
    path: "/pages/charging-rule-wait/index",
  },
  {
    name: "订单关闭审核✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/order-closure/index",
  },
  {
    name: "禁用泊位审核✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/berth-closure/index",
  },
  {
    name: "异常订单✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/order-abnormal/index",
  },
  {
    name: "工单管理✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/work-order/index",
  },
  {
    name: "封顶超额✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/limit/index",
  },
  {
    name: "易被投诉订单✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/high-complaint-risk/index",
  },
  {
    name: "车牌核验✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/license-plate-checking/index",
  },
  {
    name: "视频桩违停✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/video-stake-forbid/index",
  },
  {
    name: "异常泊位✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/abnormal-parking/index",
  },
  {
    name: "设备断网工单✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/network-error-ticket/index",
  },
  {
    name: "停车订单✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/park-order/list/index",
  },
  {
    name: "车位监控✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/parking-monitor/index",
  },
  {
    name: "车牌支付查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/pay-order/car-pay/index",
  },
  {
    name: "用户支付查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/pay-order/user-pay/index",
  },
  {
    name: "欠费查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/arrears/index",
  },
  {
    name: "封顶查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/cap-query/index",
  },
  {
    name: "优惠券查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/coupon/index",
  },
  {
    name: "巡检人员信息✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/inspector-info/index",
  },
  {
    name: "客服人员信息✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/customer-service-info/index",
  },
  {
    name: "僵尸车查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/ghost-car/index",
  },
  {
    name: "新车辆查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/new-car/index",
  },
  {
    name: "多欠费在停车辆✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/parking-vehicles/index",
  },
  {
    name: "外地车查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/foreign-vehicles/index",
  },
  {
    name: "月卡（有效）✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/monthly-card/index",
  },
  {
    name: "市民信息✔",
    icon: "/static/images/reserve@2x.png",
    path: "/pages/citizen-info/index",
  },
  {
    name: "车辆信息✔",
    icon: "/static/images/reserve@2x.png",
    path: "/pages/vehicle-info/index",
  },

  {
    name: "车牌查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/plate-query/index",
  },
  {
    name: "无感停车✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/contactless-parking/index",
  },
  {
    name: "月租车管理✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/monthly-rental-car/index",
  },
  {
    name: "月卡购买记录✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/monthly-card-records/index",
  },
  {
    name: "设备状态✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/device-status/index",
  },
  {
    name: "设备统计✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/device-statistics/index",
  },
  {
    name: "信号查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/signal-query/index",
  },
  {
    name: "基础管理✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/base-manage/index",
  },
  {
    name: "系统用户✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/system-user/index",
  },
  {
    name: "角色管理✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/system-role/index",
  },
  {
    name: "营运数据✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/operation-data/index",
  },
  {
    name: "财务中心✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/finance-center/index",
  },
  {
    name: "数据看板（财务）✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/data-dashboard/index",
  },
  {
    name: "数据明细✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/data-detail/index",
  },
  {
    name: "收入汇总✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/income-summary/index",
  },
  {
    name: "数据简报✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/data-brief/index",
  },
  {
    name: "巡检监控✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/patrol-monitor/index",
  },
  {
    name: "资源数据✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/resource-data/index",
  },
  {
    name: "停车数据（财务）✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/parking-finance/index",
  },
  {
    name: "场内车辆核验✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/vehicle-internal-verify/index",
  },
  {
    name: "最新消息✔",
    icon: "/static/images/message@2x.png",
    path: "/pages/latest-messages/index",
  },
  {
    name: "今日处理✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/today-tasks/index",
  },
  {
    name: "我处理的✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/my-pending/index",
  },
  {
    name: "系统通知✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/system-notification/index",
  },
  {
    name: "通知公告✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/user-notice/index",
  },
  {
    name: "工作台✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/dashboard/index",
  },
  {
    name: "数据汇总1✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/data-summary/index",
  },
  {
    name: "巡检功能✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/inspection/index",
  },
  {
    name: "值班签到✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/duty-checkin/index",
  },
  {
    name: "组员管理✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/member-management/index",
  },
  {
    name: "位置监控✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/location-monitor/index",
  },
  {
    name: "排班查询✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/schedule-query/index",
  },
  {
    name: "考勤统计✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/attendance-stats/index",
  },
  {
    name: "核验行为监督✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/verification-supervision/index",
  },
  {
    name: "巡检行为监督✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/patrol-behavior-supervision/index",
  },
  {
    name: "巡检绩效看板✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/patrol-performance/index",
  },
  {
    name: "数据汇总2✔",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/data-summary-2/index",
  },
];

// Modal相关数据
const showModal = ref(false);
const modalTitle = ref("");
const modalContent = ref("");
const currentAction = ref("");

// 更多弹窗相关数据
const showMorePopover = ref(false);

// 整合成一个多维数组，包含标题和菜单项
const menuGroups = ref([
  {
    title: '订单/泊位审核',
    items: [
      { name: '订单关闭审核', icon: '/static/home/blue-circle.png', path: '/pages/order-closure/index' },
      { name: '禁用泊位审核', icon: '/static/home/blue-circle.png', path: '/pages/berth-closure/index' },
    ]
  },
  {
    title: '工单处理核验',
    items: [
      { name: '设备断网工单', icon: '/static/home/blue-circle.png', path: '/pages/network-error-ticket/index' },
      { name: '封顶超额', icon: '/static/home/blue-circle.png', path: '/pages/limit/index' },
      { name: '车牌核验', icon: '/static/home/blue-circle.png', path: '/pages/license-plate-checking/index' },
      { name: '视频桩违停', icon: '/static/home/blue-circle.png', path: '/pages/video-stake-forbid/index' },
      { name: '易被投诉订单', icon: '/static/home/blue-circle.png', path: '/pages/high-complaint-risk/index' },
      { name: '场内车辆核验', icon: '/static/home/blue-circle.png', path: '/pages/vehicle-internal-verify/index' },
    ]
  },
  {
    title: '设备总览',
    items: [
      { name: '设备状态', icon: '/static/home/blue-circle.png', path: '/pages/device-status/index' },
      { name: '设备统计', icon: '/static/home/blue-circle.png', path: '/pages/data-dashboard/index' },
    ]
  },
  {
    title: '处理事项',
    items: [
      { name: '今日处理', icon: '/static/home/blue-circle.png', path: '/pages/today-tasks/index' },
      { name: '我的处理', icon: '/static/home/blue-circle.png', path: '/pages/my-pending/index' },
    ]
  },
  {
    title: '月卡',
    items: [
      { name: '月卡（有效）', icon: '/static/home/blue-circle.png', path: '/pages/monthly-card/valid' },
      { name: '月卡购买记录', icon: '/static/home/blue-circle.png', path: '/pages/monthly-card/purchase-history' },
    ]
  },
  {
    title: '统一查询',
    items: [
      { name: '车牌支付查询', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/plate-payment' },
      { name: '用户支付查询', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/user-payment' },
      { name: '欠费查询', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/arrears' },
      { name: '封顶查询', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/cap' },
      { name: '多欠费在停车辆', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/multiple-arrears' },
      { name: '僵尸车查询', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/zombie-vehicles' },
      { name: '新车辆查询', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/new-vehicles' },
      { name: '车牌查询', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/plate' },
      { name: '外地车查询', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/non-local-vehicles' },
      { name: '无感停车', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/seamless-parking' },
      { name: '信号查询', icon: '/static/home/blue-circle.png', path: '/pages/unified-query/signal' },
    ]
  },
  {
    title: '通知',
    items: [
      { name: '系统通知', icon: '/static/home/blue-circle.png', path: '/pages/notification/system' },
      { name: '通知公告', icon: '/static/home/blue-circle.png', path: '/pages/notification/announcement' },
    ]
  },
  {
    title: '巡检员管理',
    items: [
      { name: '值班签到', icon: '/static/home/blue-circle.png', path: '/pages/inspector/check-in' },
      { name: '考勤统计', icon: '/static/home/blue-circle.png', path: '/pages/inspector/attendance' },
      { name: '位置监控', icon: '/static/home/blue-circle.png', path: '/pages/inspector/location' },
      { name: '巡检监控', icon: '/static/home/blue-circle.png', path: '/pages/inspector/monitoring' },
      { name: '排班查询', icon: '/static/home/blue-circle.png', path: '/pages/inspector/schedule' },
    ]
  },
  {
    title: '行为监督',
    items: [
      { name: '核验行为监督', icon: '/static/home/blue-circle.png', path: '/pages/behavior-supervision/verification' },
      { name: '巡检行为监督', icon: '/static/home/blue-circle.png', path: '/pages/behavior-supervision/inspection' },
    ]
  },
  {
    title: '数据看板展示',
    items: [
      { name: '数据汇总1', icon: '/static/home/blue-circle.png', path: '/pages/data-dashboard/summary1' },
      { name: '数据汇总2', icon: '/static/home/blue-circle.png', path: '/pages/data-dashboard/summary2' },
      { name: '营运数据', icon: '/static/home/blue-circle.png', path: '/pages/data-dashboard/operation' },
      { name: '资源数据', icon: '/static/home/blue-circle.png', path: '/pages/data-dashboard/resources' },
      { name: '停车数据（财务）', icon: '/static/home/blue-circle.png', path: '/pages/data-dashboard/parking-finance' },
      { name: '数据明细', icon: '/static/home/blue-circle.png', path: '/pages/data-dashboard/details' },
      { name: '数据简报', icon: '/static/home/blue-circle.png', path: '/pages/data-dashboard/briefing' },
      { name: '数据看板（财务）', icon: '/static/home/blue-circle.png', path: '/pages/data-dashboard/finance' },
      { name: '巡检绩效看板', icon: '/static/home/blue-circle.png', path: '/pages/data-dashboard/inspection-performance' },
    ]
  },
  {
    title: '信息中心',
    items: [
      { name: '巡检人员信息', icon: '/static/home/blue-circle.png', path: '/pages/info-center/inspector' },
      { name: '客服人员信息', icon: '/static/home/blue-circle.png', path: '/pages/info-center/customer-service' },
      { name: '市民信息', icon: '/static/home/blue-circle.png', path: '/pages/info-center/citizen' },
      { name: '车辆信息', icon: '/static/home/blue-circle.png', path: '/pages/info-center/vehicle' },
    ]
  },
  {
    title: '综合管理',
    items: [
      { name: '角色管理', icon: '/static/home/blue-circle.png', path: '/pages/management/role' },
      { name: '组员管理', icon: '/static/home/blue-circle.png', path: '/pages/management/member' },
      { name: '月租车管理', icon: '/static/home/blue-circle.png', path: '/pages/management/monthly-rental' },
    ]
  }
]);

// 更多菜单项数据（保留原有数据用于兼容）
const moreMenuItems = [
  {
    name: "营运数据",
    icon: "/static/home/17.png",
    path: "/pages/operation-data/index",
  },
  {
    name: "数据看板",
    icon: "/static/home/18.png",
    path: "/pages/data-dashboard/index",
  },
  {
    name: "数据汇总",
    icon: "/static/home/19.png",
    path: "/pages/data-summary/index",
  },
  {
    name: "数据汇总2",
    icon: "/static/home/20.png",
    path: "/pages/data-summary-2/index",
  },
  {
    name: "巡检绩效",
    icon: "/static/home/15.png",
    path: "/pages/patrol-performance/index",
  },
  {
    name: "核验监督",
    icon: "/static/home/16.png",
    path: "/pages/verification-supervision/index",
  },
  {
    name: "巡检监督",
    icon: "/static/home/14.png",
    path: "/pages/patrol-behavior-supervision/index",
  },
  {
    name: "考勤统计",
    icon: "/static/home/13.png",
    path: "/pages/attendance-stats/index",
  },
];

// 处理更多菜单项点击事件
const handleMoreItemClick = (item) => {
  showMorePopover.value = false;

  // 跳转到对应页面
  if (item.path) {
    uni.navigateTo({
      url: item.path,
    });
  }
};

// 处理菜单点击事件
const handleMenuClick = (item) => {
  // 如果是"更多"按钮，显示弹窗
  if (item.name === "更多") {
    showMorePopover.value = true;
    return;
  }

  // 如果是退出登录，直接处理
  if (item.action === "logout") {
    showModal.value = true;
    modalTitle.value = "退出账号";
    modalContent.value = "确认退出当前账号吗？";
    currentAction.value = "logout";
    return;
  }

  // 检查登录状态
  if (!userStore.isLogined) {
    // 未登录，跳转到登录页面
    uni.navigateTo({
      url: "/pages/login/index"
    });
    return;
  }

  // 已登录，执行对应的操作
  switch (item.action) {
    case "myPending":
      uni.navigateTo({
        url: "/pages/my-pending/index"
      });
      break;
    case "bindWechat":
      uni.showToast({
        title: "未开通",
        icon: "none",
      });
      break;
    case "checkUpdate":
      uni.showToast({
        title: "当前已是最新版本",
        icon: "none",
      });
      break;
    case "clearCache":
      showModal.value = true;
      modalTitle.value = "清理缓存";
      modalContent.value = "确认清理应用缓存数据吗？";
      currentAction.value = "clearCache";
      break;
    default:
      // 跳转到对应页面
      if (item.path) {
        uni.navigateTo({
          url: item.path,
        });
      }
      break;
  }
};

// 处理Modal确认事件
const handleModalConfirm = () => {
  showModal.value = false;

  if (currentAction.value === "logout") {
    // 清理用户信息
    userStore.clearUserInfo();
    // 显示退出成功提示
    uni.showToast({
      title: "已退出登录",
      icon: "success",
    });
    // 可选：跳转到登录页面
    // uni.reLaunch({
    //   url: "/pages/login/index",
    // });
  } else if (currentAction.value === "clearCache") {
    console.log("执行清理缓存操作");
    // 这里添加清理缓存的逻辑
    uni.showToast({
      title: "缓存清理完成",
      icon: "success",
    });
  }

  // 重置当前操作
  currentAction.value = "";
};

// 处理消息图标点击事件
const handleMessageClick = () => {
  // 跳转到消息页面
  uni.navigateTo({
    url: '/pages/message/index'
  });
};

// 处理退出登录图标点击事件
const handleLogoutClick = () => {
  showModal.value = true;
  modalTitle.value = "退出登录";
  modalContent.value = "确定要退出登录吗？";
  currentAction.value = "logout";
};

// 页面生命周期
onMounted(() => {
  // fetchUnreadNotificationCount();
});
</script>

<style lang="scss" scoped>
/* 顶部四个入口样式 */
.top-entries {
  display: flex;
  justify-content: space-between;
  border-radius: 20rpx;
}

.top-entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 40rpx 0rpx;
  cursor: pointer;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.top-entry-icon {
  width: 88rpx;
  height: 88rpx;
  margin-bottom: 18rpx;
}

.top-entry-name {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  font-weight: 500;
}

/* 功能业务标题样式 */
.business-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  padding: 30rpx;
  color: #000000;
  border-radius: 20rpx 20rpx 0 0;
  margin-bottom: 0;
}

/* 功能业务入口样式 */
.business-entries {
  display: flex;
  flex-wrap: wrap;
  background: white;
  border-radius: 0 0 20rpx 20rpx;
  padding: 20rpx;
}

.business-entry-item {
  width: 25%;
  padding: 10rpx;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;

  &:active {
    transform: scale(0.95);
    background-color: #f5f5f5;
    border-radius: 15rpx;
  }
}

.business-entry-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 25rpx 10rpx;
  border-radius: 24rpx;
}

.business-entry-item-last {
  align-items: center;
  justify-content: center;
  text-align: center;

  .business-entry-icon {
    margin: 0 auto 12rpx;
  }

  .business-entry-name,
  .business-entry-desc {
    text-align: center;
    width: 100%;
  }
}

.business-entry-icon {
  width: 65rpx;
  height: 65rpx;
  margin-bottom: 12rpx;
}

.business-entry-name {
  font-size: 26rpx;
  color: #333;
  text-align: center;
  font-weight: 500;
  margin-bottom: 6rpx;
  line-height: 1.2;
}

.business-entry-desc {
  font-size: 22rpx;
  color: #666;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 通知徽章样式 */
.notification-badge {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  background: #f5222d;
  color: white;
  font-size: 18rpx;
  padding: 4rpx 8rpx;
  border-radius: 20rpx;
  min-width: 30rpx;
  text-align: center;
  line-height: 1;
}

/* 更多功能弹窗样式 */
.more-popover-content {
  width: 500rpx;
  padding: 30rpx;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.more-popover-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
  text-align: center;
}

.collapse-scroll-container {
  flex: 1;
  height: calc(100vh - 100rpx);
  overflow-y: auto;
}

.more-popover-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.more-menu-item {
  width: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: #f6f8ff;
  border-radius: 15rpx;
}

.more-menu-icon {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 15rpx;
}

.more-menu-name {
  font-size: 26rpx;
  color: #333;
}

.collapse-container {
  width: 100%;
  .item__title__slot-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #1672FF;
  }
}

.collapse-content {
  padding: 10rpx 0;
}

.collapse-menu-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  transition: background-color 0.3s;
}

.collapse-menu-item:active {
  background-color: #f5f5f5;
}

.collapse-menu-icon {
  width: 20rpx;
  height: 20rpx;
}

.collapse-menu-name {
  font-size: 28rpx;
  color: #333;
  margin-left: 20rpx;
}

.user-info-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .user-left {
    display: flex;
    align-items: center;
    flex: 1;

    .user-details {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;

      .user-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 8rpx;
      }

      .user-phone {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }

  .user-right {
    display: flex;
    align-items: center;
    gap: 30rpx;

    .icon-item {
      position: relative;
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon-image {
        width: 48rpx;
        height: 48rpx;
      }

      .badge {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        background: #ff4757;
        color: white;
        border-radius: 50%;
        min-width: 32rpx;
        height: 32rpx;
        font-size: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8rpx;
      }
    }
  }
}

.user-center {
  ::v-deep {
    .u-cell__body {
      padding: 28rpx 15px !important;
    }
  }

  .login-section {
    padding: 30rpx;

    .login-prompt {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .user-info {
        display: flex;
        align-items: center;
        flex: 1;

        .login-text {
          margin-left: 30rpx;

          .welcome-text {
            font-size: 32rpx;
            color: #333333;
            font-weight: bold;
            margin-bottom: 10rpx;
          }

          .login-hint {
            font-size: 24rpx;
            color: #999999;
          }
        }
      }

      .wechat-login-btn {
        width: 160rpx;
        height: 60rpx;
        background: #07c160;
        border-radius: 30rpx;
        color: #ffffff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        flex-shrink: 0;

        &:active {
          background: #06ad56;
        }
      }
    }
  }

  .user-info-section {
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .user-basic-info {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      position: relative;

      .user-detail {
        margin-left: 30rpx;

        .user-name {
          font-size: 32rpx;
          color: #333333;
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }

        .user-phone {
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
          line-height: 14px;
          text-align: center;
          background: #fe6000;
          border-radius: 4px;
          width: 48px;
          line-height: 20px;
        }

        .user-id {
          position: absolute;
          padding: 0 30rpx;
          height: 56rpx;
          background: linear-gradient(180deg, #7fa6ff 0%, #426bff 100%);
          border-radius: 102rpx 0rpx 0rpx 102rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #ffffff;
          line-height: 56rpx;
          text-align: center;
          right: -60rpx;
          top: 40rpx;
        }
      }
    }

    .stat-section {
      display: flex;
      justify-content: space-between;
      padding: 0 60rpx;

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .stat-number {
          font-weight: bold;
          font-size: 56rpx;
          color: #333333;
        }

        .stat-label {
          font-size: 24rpx;
          color: #777777;
        }
      }
    }
  }

  .menu-section {
    margin-bottom: 20rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
    border-radius: 24rpx;
    overflow: hidden;

    .menu-icon-wrapper {
      position: relative;
      margin-right: 20rpx;
    }

    .menu-icon {
      width: 44rpx;
      height: 44rpx;
    }
  }
}
</style>
